/**
 * Created by YJH on 2018/5/29.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
} from 'react-native';


/** 主页面listview列表的item */
export default class RespositoryCell extends Component {
    constructor(props) {
        super(props);

        this.state={
            favorite: this.props.projectModule.isFavorite,
            favoriteIcon: this.props.projectModule.isFavorite ? require('../../res/images/ic_star.png') : require('../../res/images/ic_unstar_transparent.png'),
            theme:this.props.hTheme,

        }
    }

    setFavoreteState(isFavorite) {
        this.setState({
            favorite: isFavorite,
            favoriteIcon: isFavorite ? require('../../res/images/ic_star.png')
                : require('../../res/images/ic_unstar_transparent.png'),
        })
    }

    componentWillReceiveProps(nextProps){
        if (nextProps.hTheme !== this.props.theme) {
            this.setState({
                theme: nextProps.hTheme
            })
        }


        this.setFavoreteState(nextProps.projectModule.isFavorite);
    }

    /** 点击搜藏*/
    onFavorite() {
        this.setFavoreteState(!this.state.favorite);
        this.props.onFavoritePressed(this.props.projectModule.item, !this.state.favorite);
    }

    render() {
        let data=this.props.projectModule.item?this.props.projectModule.item:this.props.projectModule;
        let FavoriteButton = <TouchableOpacity onPress={() => {
            this.onFavorite()
        }}>
            <View style={styles.item_star}>
                <Image style={[{width: 20, height: 20}, {tintColor: this.state.theme.themeColor}]}
                       source={this.state.favoriteIcon}

                />
                <Text style={styles.item_star_num}>
                    {data.stargazers_count}
                </Text>
            </View>
        </TouchableOpacity>;


        return <TouchableOpacity style={styles.touchable} onPress={this.props.goItemDetail}>
            <View style={styles.item_cell}>
                <View style={styles.item_avatar}>
                    <Image source={{width: 40, height: 40, uri: data.owner.avatar_url}}/>
                    <Text style={styles.item_owner}>
                        {data.full_name}
                    </Text>
                </View>

                {FavoriteButton}
                <Text style={styles.item_des}>
                    {data.description}
                </Text>
            </View>
        </TouchableOpacity>
    }
}
const styles = StyleSheet.create({
    touchable: {
        flex: 1,
    },
    item_cell: {
        padding: 10,
        backgroundColor: '#ffffff',
        borderWidth: 3,
        borderColor: '#F0F0F0',
        borderRadius: 5,
        elevation: 2,

    },
    item_avatar: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    item_star: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    item_star_num: {
        color: 'orange',
        marginLeft: 10,
        marginRight: 10,
        fontSize: 14,
    },
    item_owner: {
        color: 'black',
        marginLeft: 10,
        marginRight: 10,
        fontSize: 16,
    },
    item_des: {
        color: 'gray',
        marginLeft: 50,
        fontSize: 14,
        flexWrap: 'nowrap',
    },

});